<template>
  <div class="distributionbox">
    <div class="box">
      <div class="boxleft">
        <img src="@/assets/images/img_peidiangui_red.png" alt="" />
      </div>
      <div class="boxright">
        <div class="boxright_top">
          <CardSlot :title="'能耗总览'" :width="''">
            <div class="energy">
              <div class="energy_left">
                <div class="energy_box">
                  <div class="energy_top">
                    <div class="energy_top_l">
                      <img src="@/assets/images/ico_power.png" alt="用电" />
                      <div>用电</div>
                    </div>
                    <div class="energy_top_r">
                      <div>(单位 kwh)</div>
                    </div>
                  </div>
                  <div class="energy_bottom">
                    <div class="energy_list">
                      <div>当日</div>
                      <div>19988.00</div>
                    </div>
                    <div class="energy_list">
                      <div>当月</div>
                      <div>761085.00</div>
                    </div>
                    <div class="energy_list">
                      <div>当年</div>
                      <div>38670514.00</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="energy_right">
                <div class="energy_box">
                  <div class="energy_top">
                    <div class="energy_top_l">
                      <img src="@/assets/images/ico_powerall.png" alt="用电" />
                      <div>总能耗</div>
                    </div>
                    <div class="energy_top_r">
                      <div>(单位 tce)</div>
                    </div>
                  </div>
                  <div class="energy_bottom">
                    <div class="energy_list">
                      <div>当日</div>
                      <div>35088.00</div>
                    </div>
                    <div class="energy_list">
                      <div>当月</div>
                      <div>932547.00</div>
                    </div>
                    <div class="energy_list">
                      <div>当年</div>
                      <div>66677539.00</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </CardSlot>

          <CardSlot :title="'设备状态'" :width="''">
            <div class="unite">
              <div class="unite_left">
                <div class="unite_box">
                  <div class="unite_top">
                    <div class="unite_top_l">
                      <img src="@/assets/images/ico_equipment.png" alt="设备" />
                      <div>设备</div>
                    </div>
                    <div class="unite_top_r">
                      <div class="unite_num">在线</div>
                      <div class="unite_unit" />
                    </div>
                  </div>
                  <div class="unite_bottom">
                    <div class="unite_list">
                      <div>
                        <img src="@/assets/images/ico_unite1.png" alt="" />
                        温度
                      </div>
                      <div>36℃</div>
                    </div>
                    <div class="unite_list">
                      <div>
                        <img src="@/assets/images/ico_unite2.png" alt="" />
                        湿度
                      </div>
                      <div>65%</div>
                    </div>
                    <div class="unite_list">
                      <div>
                        <img src="@/assets/images/ico_unite3.png" alt="" />
                        浪涌
                      </div>
                      <div>1000A</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="unite_right">
                <div class="unite_box">
                  <div class="unite_top">
                    <div class="unite_top_l">
                      <img src="@/assets/images/ico_duration.png" alt="设备" />
                      <div>时长</div>
                    </div>
                    <div class="unite_top_r">
                      <div class="unite_num">235</div>
                      <div class="unite_unit">h</div>
                    </div>
                  </div>
                  <div class="unite_bottom">
                    <div class="unite_list">
                      <div>
                        <img src="@/assets/images/ico_unite4.png" alt="" />
                        烟雾
                      </div>
                      <div>无</div>
                    </div>
                    <div class="unite_list">
                      <div>
                        <img src="@/assets/images/ico_unite5.png" alt="" />
                        水浸
                      </div>
                      <div>无</div>
                    </div>
                    <div class="unite_list">
                      <div>
                        <img src="@/assets/images/ico_unite6.png" alt="" />
                        开关
                      </div>
                      <div>开</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </CardSlot>

          <CardSlot :title="'电压电流'" :width="''" :moreShow="true">
            <div class="unite">
              <div class="unite_left">
                <div class="unite_box">
                  <div class="unite_top">
                    <div class="unite_top_l">
                      <img src="@/assets/images/ico_electric.png" alt="设备" />
                      <div>电流</div>
                    </div>
                    <div class="unite_top_r">
                      <div class="unite_num" />
                      <div class="unite_unit">(单位 A)</div>
                    </div>
                  </div>
                  <div class="unite_bottom">
                    <div class="unite_list">
                      <div>A相</div>
                      <div>513.40</div>
                    </div>
                    <div class="unite_list">
                      <div>B相</div>
                      <div>502.00</div>
                    </div>
                    <div class="unite_list">
                      <div>C相</div>
                      <div>487.80</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="unite_right">
                <div class="unite_box">
                  <div class="unite_top">
                    <div class="unite_top_l">
                      <img src="@/assets/images/ico_duration.png" alt="设备" />
                      <div>电压</div>
                    </div>
                    <div class="unite_top_r">
                      <div class="unite_num" />
                      <div class="unite_unit">(单位 V)</div>
                    </div>
                  </div>
                  <div class="unite_bottom">
                    <div class="unite_list">
                      <div>A相</div>
                      <div>236.60V</div>
                    </div>
                    <div class="unite_list">
                      <div>B相</div>
                      <div>236.90V</div>
                    </div>
                    <div class="unite_list">
                      <div>C相</div>
                      <div>237.20V</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <template #more>
              <div @click.stop="goDetail">查看详情</div>
            </template>
          </CardSlot>

          <CardSlot :title="'有功无功'" :width="''">
            <div class="unite">
              <div class="unite_left">
                <div class="unite_box">
                  <div class="unite_top">
                    <div class="unite_top_l">
                      <img src="@/assets/images/ico_electric.png" alt="设备" />
                      <div>有功功率</div>
                    </div>
                    <div class="unite_top_r">
                      <div class="unite_num" />
                      <div class="unite_unit">(单位 kW)</div>
                    </div>
                  </div>
                  <div class="unite_bottom">
                    <div class="unite_list">
                      <div>A相</div>
                      <div>513.40</div>
                    </div>
                    <div class="unite_list">
                      <div>B相</div>
                      <div>502.00</div>
                    </div>
                    <div class="unite_list">
                      <div>C相</div>
                      <div>487.80</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="unite_right">
                <div class="unite_box">
                  <div class="unite_top">
                    <div class="unite_top_l">
                      <img src="@/assets/images/ico_duration.png" alt="设备" />
                      <div>无功功率</div>
                    </div>
                    <div class="unite_top_r">
                      <div class="unite_num" />
                      <div class="unite_unit">(单位 kvar)</div>
                    </div>
                  </div>
                  <div class="unite_bottom">
                    <div class="unite_list">
                      <div>A相</div>
                      <div>236.60</div>
                    </div>
                    <div class="unite_list">
                      <div>B相</div>
                      <div>236.90</div>
                    </div>
                    <div class="unite_list">
                      <div>C相</div>
                      <div>237.20</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </CardSlot>
        </div>
        <!-- <div class="boxright_bottom">
          <CardSlot :title="'设备信息'" :width="''">
            <div class="infobox">
              <div class="info">
                <div class="info_list">
                  <div>设备名称</div>
                  <div>配电箱F91</div>
                </div>
                <div class="info_list">
                  <div>设备编号</div>
                  <div>#1</div>
                </div>
                <div class="info_list">
                  <div>设备状态</div>
                  <div>在线</div>
                </div>
                <div class="info_list">
                  <div>在线时长</div>
                  <div>235h</div>
                </div>
              </div>
              <div class="info">
                <div class="info_list">
                  <div>固件版本</div>
                  <div>DNAWD14</div>
                </div>
                <div class="info_list">
                  <div>通讯类型</div>
                  <div>有线</div>
                </div>
                <div class="info_list">
                  <div>网关IP</div>
                  <div>192.168.1.101</div>
                </div>
                <div class="info_list">
                  <div>信号强度</div>
                  <div>100%</div>
                </div>
              </div>
              <div class="info">
                <div class="info_list">
                  <div>当前模式</div>
                  <div>实时模式</div>
                </div>
                <div class="info_list">
                  <div>当前状态</div>
                  <div>实时控制</div>
                </div>
                <div class="info_list">
                  <div>当前场景</div>
                  <div>定时省电</div>
                </div>
                <div class="info_list">
                  <div>当前任务</div>
                  <div>未分配</div>
                </div>
              </div>
            </div>
          </CardSlot>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import CardSlot from "@/components/cardslot/index.vue";
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

let threedom;

let router = useRouter();
const goDetail = () => {
  router.push("/xiangqing");
};

// 模型
let three = null;
let controls = null;
const initPDG = () => {
  three = window.three;
  controls = window.three.controls;
  const GLBLoader = new GLTFLoader();
  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("/draco/");
  dracoLoader.setDecoderConfig({ type: "js" });
  GLBLoader.setDRACOLoader(dracoLoader);
  GLBLoader.load(
    "/gltf/f3.glb",
    gltf => {
      gltf.scene.scale.set(2, 2, 2);
      gltf.scene.position.set(0, 0, -1.5);
      gltf.scene.rotation.set(0, 0, 0);
      changeMaterialEmissive(gltf.scene);
      three.scene.add(gltf.scene);
    },
    progressEvent => {
      const { loaded, total, lengthComputable } = progressEvent;
      if (lengthComputable) {
      } else {
      }
    },
    error => {
      console.log("error:", error);
    }
  );

  threedom.style.width = "550px";
  threedom.style.height = "1000px";
  threedom.style.marginTop = "75px";
  let canvasdom = threedom.querySelector("canvas");
  canvasdom.style.width = "550px";
  canvasdom.style.height = "1000px";

  animate();
};

const changeMaterialEmissive = parent => {
  parent.traverse(function (obj) {
    if (obj instanceof THREE.Mesh) {
      obj.material.emissive = obj.material.color;
      obj.material.opacity = 0.6;
      obj.material.emissiveIntensity = 0.8;
      obj.material.emissiveMap = obj.material.map;
      obj.material.side = THREE.DoubleSide;
      obj.castShadow = true;
      obj.receiveShadow = true;
      obj.frustumCulled = false;
    }
  });
};

const removeGltf = () => {
  cancelAnimationFrame(animate);
  three.scene.clear();
  three.renderer.content = null;
  three?.renderer.dispose();
  three?.scene.children.forEach(child => {
    three.scene.remove(child);
  });

  // 清理内存中的模型数据
  three?.scene.traverse(child => {
    if (child.isMesh) {
      child.geometry.dispose();
      if (child.material) {
        const material = Array.isArray(child.material)
          ? child.material
          : [child.material];
        material.forEach(mat => mat.dispose());
      }
    }
  });
};

const animate = () => {
  requestAnimationFrame(animate);
  controls.update();
  three?.renderer?.render(three.scene, three.camera);
};

onMounted(() => {
  threedom = document.getElementById("ThreeContainer");
  // threedom.style.display = "none";

  // initPDG();
});

onBeforeUnmount(() => {
  // removeGltf();
});

onUnmounted(() => {
  threedom.style.display = "block";
});
</script>

<style scoped lang="scss">
// .distributionbox {
//   width: 100%;
//   height: 100%;
//   background-image: url("@/assets/images/img_otherbg.png");
//   background-repeat: no-repeat;
//   background-size: 100% 100%;
// }

.box {
  position: fixed;
  top: 221px;
  left: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  max-height: calc(100vh - 221px);

  .boxleft {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35%;

    img {
      max-width: 100%;
    }
  }

  .boxright {
    width: 65%;
    display: flex;
    align-items: center;

    .boxright_top {
      display: flex;
      flex-flow: row wrap;
      align-items: center;

      .cardslot {
        width: calc(50% - 50px);
        margin: 11px 25px;
      }
    }

    .boxright_bottom {
      .cardslot {
        width: calc(100% - 50px);
        margin: 11px 25px;
      }

      .infobox {
        display: flex;
        align-items: center;

        .info {
          flex: 1;
          padding: 19px 26px;
          border-right: 1px solid #eee;

          &:last-child {
            border-right: none;
          }

          .info_list {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 15px;

            &:last-child {
              padding-bottom: 0;
            }

            div {
              display: flex;
              align-items: center;

              img {
                margin-right: 10px;
              }

              &:first-child {
                font-size: 14px;
                line-height: 14px;
                color: #333;
              }

              &:last-child {
                font-size: 20px;
                font-weight: bold;
                line-height: 20px;
                color: #0759d2;
              }
            }
          }
        }
      }
    }
  }
}

.energy {
  display: flex;
  // align-items: center;

  .energy_left {
    flex: 1;
    border-right: 1px solid #eee;
  }

  .energy_right {
    flex: 1;
  }

  .energy_box {
    padding: 0 15px;

    .energy_top {
      display: flex;
      // align-items: center;
      align-items: last baseline;
      justify-content: space-between;

      .energy_top_l {
        display: flex;
        align-items: center;

        img {
          width: 45px;
          height: 37px;
        }

        div {
          margin-left: 6px;
          font-size: 20px;
          font-weight: bold;
          line-height: 20px;
          color: #333;
        }
      }

      .energy_top_r {
        font-size: 12px;
        line-height: 12px;
        color: #333;
      }
    }

    .energy_bottom {
      padding-top: 20px;

      .energy_list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 10px;
        padding-left: 14px;

        &:last-child {
          padding-bottom: 0;
        }

        div {
          &:first-child {
            font-size: 14px;
            line-height: 14px;
            color: #333;
          }

          &:last-child {
            font-size: 20px;
            font-weight: bold;
            line-height: 20px;
            color: #0759d2;
          }
        }
      }
    }
  }
}

.unite {
  display: flex;
  // align-items: center;

  .unite_left {
    flex: 1;
    border-right: 1px solid #eee;
  }

  .unite_right {
    flex: 1;
  }

  .unite_box {
    padding: 0 10px;

    .unite_top {
      display: flex;
      // align-items: center;
      align-items: last baseline;
      justify-content: space-between;

      .unite_top_l {
        display: flex;
        align-items: center;

        img {
          width: 45px;
          height: 37px;
        }

        div {
          margin-left: 6px;
          font-size: 18px;
          font-weight: bold;
          line-height: 18px;
          color: #333;
        }
      }

      .unite_top_r {
        display: flex;
        align-items: last baseline;

        .unite_num {
          font-size: 18px;
          font-weight: bold;
          line-height: 18px;
          color: #2c6ad1;
        }

        .unite_unit {
          font-size: 12px;
          line-height: 12px;
          color: #333;
        }
      }
    }

    .unite_bottom {
      padding-top: 20px;

      .unite_list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 10px;

        &:last-child {
          padding-bottom: 0;
        }

        div {
          display: flex;
          align-items: center;

          img {
            margin-right: 10px;
          }

          &:first-child {
            font-size: 14px;
            line-height: 14px;
            color: #333;
          }

          &:last-child {
            font-size: 20px;
            font-weight: bold;
            line-height: 20px;
            color: #0759d2;
          }
        }
      }
    }
  }
}
</style>
